浅析redux saga中间件及用法|原理篇 | 前端进阶之旅

⚡ 30 秒速记

生成器产出操作描述，中间件解释执行
call 调用任务，put 派发动作
每次处理还是保留最新，由并发策略决定
取消任务不等于自动终止网络
状态更新仍回到归约函数

redux-saga 把异步流程写成一串可以暂停和继续的操作描述，再由中间件执行。 监听流程接收动作，工作流程调用服务、等待结果并派发状态变化。这样复杂的并发、取消和错误处理可以集中表达，归约函数仍只负责同步计算。选择每次都处理还是保留最新任务要看业务，取消流程也要和底层请求配合，不能把生成器停止等同于网络已经终止。

版本校准： 本文若分析 ReactDOM.render、旧生命周期或栈调和，应把它视为理解架构演进的历史路径。React 19 已移除 ReactDOM.render，当前客户端入口使用 createRoot；并发渲染也必须区分可中断的渲染阶段与同步提交阶段。迁移前对照 React 19 官方升级指南。

# 一、redux-thunk

# 1.1 redux的副作用处理

redux中的数据流大致是

UI—————>action（plain）—————>reducer——————>state——————>UI

redux是遵循函数式编程的规则，上述的数据流中，action是一个原始js对象（plain object）且reducer是一个纯函数，对于同步且没有副作用的操作，上述的数据流起到可以管理数据，从而控制视图层更新的目的
如果存在副作用函数，那么我们需要首先处理副作用函数，然后生成原始的js对象。如何处理副作用操作，在redux中选择在发出action，到reducer处理函数之间使用中间件处理副作用

redux增加中间件处理副作用后的数据流大致如下：

UI——>action(side function)—>middleware—>action(plain)—>reducer—>state—>UI

在有副作用的action和原始的action之间增加中间件处理，从图中我们也可以看出，中间件的作用就是：

转换异步操作，生成原始的action，这样，reducer函数就能处理相应的action，从而改变state，更新UI

# 1.2 redux-thunk源码

在redux中，thunk是redux作者给出的中间件，实现极为简单，10多行代码

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;